<template>
	<view class="header">
		<view class="button">
			<button style=" background-color: #4169E1; color: white;"><text class="content-text">热门推荐</text></button>
			<button style="background-color: #FF6100; color: white;"><text class="content-text">我的活动</text></button>
			<button style="background-color: #FF8000; color: white;"><text class="content-text">系统专区</text></button>
		</view>
		<view class="list">
			<uni-list :border="border">
				<uni-list-item clickable v-for="i in allitems" :note="i.studentName" :title="i.motif" :thumb="i.path"
					thumb-size="lg" :rightText="i.creatTime" @click="jumpClub(i.id)"></uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import server from "@/util/http.js"
	export default {
		data() {
			return {
				border: false,
				allitems: [],
			}
		},

		onLoad() {
			this.request();
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
			this.request();
		},
		computed: {},
		methods: {
			jumpClub(e) {
				// console.log(e);
				uni.navigateTo({
					url: '../clubDetail/clubDetail?id=' + e
				})
			},
			onNavigationBarButtonTap() {
				this.$router.push('../space/space')
			},

			//点击 进入 详情界面
			signDetail() {
				console.log('eee');
			},
			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			request() {
				//发起请求 返回 全部任务 任务类型：包括 作业 通知 打卡点名  创建时间 等 （任务类型 使用 数字 ） 并且按照 时间先后排序
				server({
					url: 'http://101.43.227.220:3004/topic/all',
					method: 'post',
					success: res => {
						let items = res.data;
						//向列表中 根据 type 值 添加 图片 路径 字段
						let m = items.map(value => {
							value.path = '/static/通知.png';
							return value;
						});
						this.allitems = m;
					},
					fail: e => {
						console.log(e);
					}
				})
			}
		}
	}
</script>

<style>
	.list {
		margin-top: 30px;
	}

	.header {
		background: #f5f5f5;
		height: 145px;
	}

	.button {
		display: flex;
		height: 75px;
		width: 373px;
		padding-top: 30px;
	}

	.content-text {
		font-size: smaller;
		text-align: center;
	}
</style>
